<template>
  <div>
    <!-- 日期格式 -->
    <div>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button type="primary" size="medium" @click="searchData"
        >搜索</el-button
      >

      <!-- echarts图表 -->
      <el-card class="box-card">
        <div id="echartContainer" style="width: 100%; height: 500px"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { orderTotal } from "../../api/order";
import dayjs from "dayjs";
export default {
  data() {
    return {
      date: "",
      myChart: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
    };
  },

  mounted() {
    this.loadData()
   //添加一个窗口改变事件
   window.addEventListener("resize",this.resizeHandle)
  },

  //销毁适配组件
  beforeDestroy(){
   window.removeEventListener("resize",this.resizeHandle)
  },

  methods: {
    //获取动态化数据
    async loadData() {
      let res = await orderTotal({ params: { date: this.date } });
      console.log(res.data);
      if (res.data=="") {
        this.$message({
          type:"success",
          message:"您选择的时间段内没有订单",
        })
 
      }else{
        this.orderList();
      }
      

      //得到x轴数据
      let xData = res.data.map((item) => {
        return dayjs(item.orderTime).format("YYYY/MM/DD");
      });

      //得到y轴数据
      let yData = res.data.map((item) => {
        return item.orderAmount;
      });
      this.orderList(xData, yData);
    },

    //搜索按钮
    searchData() {
      console.log(this.date);
      this.loadData()
    },

    //echarts适配的制作
    resizeHandle(){
      this.myChart.resize()
    },

    // 基于准备好的dom，初始化echarts实例
    orderList(xData, yData) {
      this.myChart = echarts.init(document.getElementById("echartContainer"));
      let Option = {
        title: {
          text: "堆叠区域图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["订单统计"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "订单统计",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: yData,
          },
        ],
      };
      this.myChart.setOption(Option);
    },
  },
};
</script>

<style lang="less" scoped>
.el-input__inner {
  margin-bottom: 30px;
}

.main_container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.el-date-editor {
  margin-right: 50px;
}
</style>